﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Getting information</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="./assets/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript">
        var percentage = 0;
    </script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="./assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="./assets/ico/favicon.png">
  </head>

  <body>

    <div class="container">

      <div class="masthead">
          <div style="float: right;">Logged in as: <a href="#">Meskerem Asfaw</a></div>
        <h3 class="muted">Personal health assessment questionnaire</h3>
        <br />
      </div>
	
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="progbar" style="width: 0%;">
                <span id="bar">0% Complete</span>
            </div>
        </div>
			  
	<div class="well">
		<legend>Do you have or had any of the following diseases:</legend>
                <table border="0" width ="100%" class="table table-striped">
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Chest pain, myocardial infarction, irregular pulse, heavy breathing triggered by effort.">1. Heart disease</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="1no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="1yes"><button class="btn btn-default" id="1yes-btn" type="button">Yes</button></label>
                                </span>
                                  <input type="text" id="1yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type and year here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            2. High blood pressure
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="2no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" id="2yes-btn" type="button">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Blood clots, haemophilia, easy bruising / nose bleeding.">3. Bleeding disorders</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="3no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="3yes"><button class="btn btn-default" id="3yes-btn" type="button">Yes</button></label>
                                </span>
                                  <input type="text" id="3yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Stroke, ischemia, brain haemorrhage, epilepsy.">4. Neurological disease</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="4no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="4yes"><button class="btn btn-default" id="4yes-btn" type="button">Yes</button></label>
                                </span>
                                  <input type="text" id="4yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type and year here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Asthma, COPD (Chronic Obstructive Pulmonary Disease), snoring with apnoea.">5. Pulmonary or respiratory diseases</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="5no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="5yes"><button class="btn btn-default" type="button" id="5yes-btn">Yes</button></label>
                                </span>
                                  <input type="text" id="5yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Broadly controlled, insulin, treated by medication.">6. Diabetes</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="6no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="6yes"><button class="btn btn-default" type="button" id="6yes-btn">Yes</button></label>
                                </span>
                                  <input type="text" id="6yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            7. Thyroid disease
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="7no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="7yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            8. Kidney disease
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="8no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="8yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            9. Liver disease
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="9no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="9yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Peptic ulcer, heartburn, acid reflux, oesophageal hernia.">10. Stomach problems</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="10no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="10yes"><button class="btn btn-default" type="button" id="10yes-btn">Yes</button></label>
                                </span>
                                  <input type="text" id="10yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Hepatitis, HIV, tuberculosis or other serious infectious diseases.">11. Infectious diseases</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="11no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="11yes"><button class="btn btn-default" type="button" id="11yes-btn">Yes</button></label>
                                </span>
                                  <input type="text" id="11yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            12. Psychological problems that the hospital should know
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="12no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="12yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <a href="#" data-toggle="popover" data-placement="right" id="basic-popover" title="Example:" data-content="Impaired mobility or neck instability.">13. Rheumatic disease</a>
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="13no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="13yes"><button class="btn btn-default" type="button" id="13yes-btn">Yes</button></label>
                                </span>
                                  <input type="text" id="13yes" class="form-control" disabled="disabled" placeholder="If yes, please specify type here...">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            14. Mobility limitations
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="14no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="14yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            15. Other diseases / conditions
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="15no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button" id="15yes-btn">Yes</button>
                                </span>
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                </table>
                <br />
                <br />
                <br />
                <ul class="pager">
                  <li class="previous"><a href="./index.html">&larr; Previous</a></li>
                  <li class="next"><a href="previous_general.html">Next &rarr;</a></li>
                </ul>
	</div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/js/bootstrap.js"></script>
    
    <script type="text/javascript">
        // Popover with hover
        $(function () {
            var showPopover = function () {
                $(this).popover('show');
            }
            , hidePopover = function () {
                $(this).popover('hide');
            };

            $("#basic-popover, #basic-popover2").popover({
                content: 'Popover content',
                trigger: 'manual'
                })
                .focus(showPopover)
                .blur(hidePopover)
                .hover(showPopover, hidePopover);
        });
        
        //$("#basic-tooltip").tooltip();  //Tooltips are not used at the moment
       
        //Variables for incrementing progressbar when clicking no/yes-buttons
        var canClick1=1;
        var canClick2=1;
        var canClick3=1;
        var canClick4=1;
        var canClick5=1;
        var canClick6=1;
        var canClick7=1;
        var canClick8=1;
        var canClick9=1;
        var canClick10=1;
        var canClick11=1;
        var canClick12=1;
        var canClick13=1;
        var canClick14=1;
        var canClick15=1;
        
        
        // Change color on buttons, default/success
        $('#1no-btn').click(function() {
            if(canClick1==1){
                percentage += 4;
                canClick1 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#1no-btn').addClass('btn-success');
          $('#1yes').prop('disabled', true);
          $('#1yes-btn').removeClass('btn-success');
          $('#1yes-btn').addClass('btn-default');
          });
        $('#1yes-btn').click(function() {
            if(canClick1==1){
                percentage += 4;
                canClick1 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#1yes-btn').addClass('btn-success');
          $('#1yes').prop('disabled', false);
          $('#1no-btn').removeClass('btn-success');
          $('#1no-btn').addClass('btn-default');
          });
        $('#2no-btn').click(function() {
            if(canClick2==1){
                percentage += 4;
                canClick2 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#2no-btn').addClass('btn-success');
          $('#2yes-btn').removeClass('btn-success');
          $('#2yes-btn').addClass('btn-default');
          });
        $('#2yes-btn').click(function() {
            if(canClick2==1){
                percentage += 4;
                canClick2 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#2yes-btn').addClass('btn-success');
          $('#2no-btn').removeClass('btn-success');
          $('#2no-btn').addClass('btn-default');
          });
        $('#3no-btn').click(function() {
            if(canClick3==1){
                percentage += 4;
                canClick3 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#3no-btn').addClass('btn-success');
          $('#3yes').prop('disabled', true);
          $('#3yes-btn').removeClass('btn-success');
          $('#3yes-btn').addClass('btn-default');
          });
        $('#3yes-btn').click(function() {
            if(canClick3==1){
                percentage += 4;
                canClick3 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#3yes-btn').addClass('btn-success');
          $('#3yes').prop('disabled', false);
          $('#3no-btn').removeClass('btn-success');
          $('#3no-btn').addClass('btn-default');
          });
        $('#4no-btn').click(function() {
            if(canClick4==1){
                percentage += 4;
                canClick4 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#4no-btn').addClass('btn-success');
          $('#4yes').prop('disabled', true);
          $('#4yes-btn').removeClass('btn-success');
          $('#4yes-btn').addClass('btn-default');
          });
        $('#4yes-btn').click(function() {
            if(canClick4==1){
                percentage += 4;
                canClick4 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#4yes-btn').addClass('btn-success');
          $('#4yes').prop('disabled', false);
          $('#4no-btn').removeClass('btn-success');
          $('#4no-btn').addClass('btn-default');
          });
        $('#5no-btn').click(function() {
            if(canClick5==1){
                percentage += 4;
                canClick5 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#5no-btn').addClass('btn-success');
          $('#5yes').prop('disabled', true);
          $('#5yes-btn').removeClass('btn-success');
          $('#5yes-btn').addClass('btn-default');
          });
        $('#5yes-btn').click(function() {
            if(canClick5==1){
                percentage += 4;
                canClick5 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#5yes-btn').addClass('btn-success');
          $('#5yes').prop('disabled', false);
          $('#5no-btn').removeClass('btn-success');
          $('#5no-btn').addClass('btn-default');
          });
        $('#6no-btn').click(function() {
            if(canClick6==1){
                percentage += 4;
                canClick6 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#6no-btn').addClass('btn-success');
          $('#6yes').prop('disabled', true);
          $('#6yes-btn').removeClass('btn-success');
          $('#6yes-btn').addClass('btn-default');
          });
        $('#6yes-btn').click(function() {
            if(canClick6==1){
                percentage += 4;
                canClick6 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#6yes-btn').addClass('btn-success');
          $('#6yes').prop('disabled', false);
          $('#6no-btn').removeClass('btn-success');
          $('#6no-btn').addClass('btn-default');
          });
        $('#7no-btn').click(function() {
            if(canClick7==1){
                percentage += 4;
                canClick7 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#7no-btn').addClass('btn-success');
          $('#7yes-btn').removeClass('btn-success');
          $('#7yes-btn').addClass('btn-default');
          });
        $('#7yes-btn').click(function() {
            if(canClick7==1){
                percentage += 4;
                canClick7 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#7yes-btn').addClass('btn-success');
          $('#7no-btn').removeClass('btn-success');
          $('#7no-btn').addClass('btn-default');
          });
        $('#8no-btn').click(function() {
            if(canClick8==1){
                percentage += 4;
                canClick8 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#8no-btn').addClass('btn-success');
          $('#8yes-btn').removeClass('btn-success');
          $('#8yes-btn').addClass('btn-default');
          });
        $('#8yes-btn').click(function() {
            if(canClick8==1){
                percentage += 4;
                canClick8 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#8yes-btn').addClass('btn-success');
          $('#8no-btn').removeClass('btn-success');
          $('#8no-btn').addClass('btn-default');
          });
        $('#9no-btn').click(function() {
            if(canClick9==1){
                percentage += 4;
                canClick9 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#9no-btn').addClass('btn-success');
          $('#9yes-btn').removeClass('btn-success');
          $('#9yes-btn').addClass('btn-default');
          });
        $('#9yes-btn').click(function() {
            if(canClick9==1){
                percentage += 4;
                canClick9 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#9yes-btn').addClass('btn-success');
          $('#9no-btn').removeClass('btn-success');
          $('#9no-btn').addClass('btn-default');
          });
        $('#10no-btn').click(function() {
            if(canClick10==1){
                percentage += 4;
                canClick10 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#10no-btn').addClass('btn-success');
          $('#10yes').prop('disabled', true);
          $('#10yes-btn').removeClass('btn-success');
          $('#10yes-btn').addClass('btn-default');
          });
        $('#10yes-btn').click(function() {
            if(canClick10==1){
                percentage += 4;
                canClick10 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#10yes-btn').addClass('btn-success');
          $('#10yes').prop('disabled', false);
          $('#10no-btn').removeClass('btn-success');
          $('#10no-btn').addClass('btn-default');
          });
        $('#11no-btn').click(function() {
            if(canClick11==1){
                percentage += 4;
                canClick11 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#11no-btn').addClass('btn-success');
          $('#11yes').prop('disabled', true);
          $('#11yes-btn').removeClass('btn-success');
          $('#11yes-btn').addClass('btn-default');
          });
        $('#11yes-btn').click(function() {
            if(canClick11==1){
                percentage += 4;
                canClick11 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#11yes-btn').addClass('btn-success');
          $('#11yes').prop('disabled', false);
          $('#11no-btn').removeClass('btn-success');
          $('#11no-btn').addClass('btn-default');
          });
        $('#12no-btn').click(function() {
            if(canClick12==1){
                percentage += 4;
                canClick12 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#12no-btn').addClass('btn-success');
          $('#12yes-btn').removeClass('btn-success');
          $('#12yes-btn').addClass('btn-default');
          });
        $('#12yes-btn').click(function() {
            if(canClick12==1){
                percentage += 4;
                canClick12 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#12yes-btn').addClass('btn-success');
          $('#12no-btn').removeClass('btn-success');
          $('#12no-btn').addClass('btn-default');
          });
        $('#13no-btn').click(function() {
            if(canClick13==1){
                percentage += 4;
                canClick13 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#13no-btn').addClass('btn-success');
          $('#13yes').prop('disabled', true);
          $('#13yes-btn').removeClass('btn-success');
          $('#13yes-btn').addClass('btn-default');
          });
        $('#13yes-btn').click(function() {
            if(canClick13==1){
                percentage += 4;
                canClick13 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#13yes-btn').addClass('btn-success');
          $('#13yes').prop('disabled', false);
          $('#13no-btn').removeClass('btn-success');
          $('#13no-btn').addClass('btn-default');
          });
        $('#14no-btn').click(function() {
            if(canClick14==1){
                percentage += 4;
                canClick14 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#14no-btn').addClass('btn-success');
          $('#14yes-btn').removeClass('btn-success');
          $('#14yes-btn').addClass('btn-default');
          });
        $('#14yes-btn').click(function() {
            if(canClick14==1){
                percentage += 4;
                canClick14 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#14yes-btn').addClass('btn-success');
          $('#14no-btn').removeClass('btn-success');
          $('#14no-btn').addClass('btn-default');
          });
        $('#15no-btn').click(function() {
            if(canClick15==1){
                percentage += 4;
                canClick15 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#15no-btn').addClass('btn-success');
          $('#15yes-btn').removeClass('btn-success');
          $('#15yes-btn').addClass('btn-default');
          });
        $('#15yes-btn').click(function() {
            if(canClick15==1){
                percentage += 4;
                canClick15 --;
            }
            var changePercentage = percentage + "% Complete";
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +"%";
          $('#15yes-btn').addClass('btn-success');
          $('#15no-btn').removeClass('btn-success');
          $('#15no-btn').addClass('btn-default');
          });
    </script>

  </body>
</html>
